ใบความร ท 1 เร อง การสร างเว บ ด วยโปรแกรม Macromedia Dreamweaver 8

Transcription

1 ใบความร ท 1 เร อง การสร างเว บ ด วยโปรแกรม Macromedia Dreamweaver 8 ว ชาการเข ยนเว บไซด รห สว ชา ง30203 ช นม ธยมศ กษาป ท 6 การสร างเว บ ด วยโปรแกรม Macromedia Dreamweaver 8 Macromedia Dreamweaver 8 เป นโปรแกรมท ใช สำหร บสร ำงเว บเพจ และบร หำรเว บไซต ท ได ร บ ควำมน ยมส งส ด ในกล มโปรแกรมประเภทเด ยวก น ในป จจ บ น เน องจำกค ณสมบ ต ของโปรแกรมท ม ควำมสะดวกต อกำรใช งำน ม ฟ งก ช นท ทำให ผ ใช สำมำรถจ ดวำงข อควำม ร ปภำพ ตำรำง ฟอร ม ว ด โอ รวมถ งองค ประกอบอ น ๆ ภำยในเว บเพจได อย ำงสวยงำมตำมท ผ ใช ต องกำร โดยไม ต องใช ภำษำสคร ปต ท ย งยำกซ บซ อนเหม อนก อน ด วย ควำมสำมำรถและค ณสมบ ต ของโปรแกรม จ งเหมำะสำหร บน กเร ยน การต ดต งโปรแกรม กำรต ดต งโปรแกรม Dreamweaver 8 ม ข นตอนด งน ใส แผ นซ ด รอม โปรแกรม Dreamweaver 8 เข ำไปในไดร ฟซ ด รอม โปรแกรมจะเร มทำงำนโดยอ ตโนม ต หร อถ ำเป ดเข ำไปท ไดรฟ ซ ด รอม ด บเบ ลคล กท ไอคอน Setup โปรแกรม จะได หน ำต ำงข อตกลงส ทธ กำรใช งำน (License Agreement) คล กเล อก I accept แล วคล ก ป ม Next

2 เล อกไดเรกทอร ท ต องกำร เช น C:\Program File ถ ำต องกำรเปล ยนให คล กป ม Change เล อก ไดรฟ และโฟลเดอร ท ต องกำรแล วคล กป ม Next เล อกชน ดของโปรแกรมท จะใช ร วมก บ Dreamweaver (Default Editor) ถ ำเล อกท งหมดแล วคล ก ป ม Select All แล วคล กป ม Next คล กป ม Install เพ อต ดต งโปรแกรม

3 เร มต ดต งโปรแกรมลงในเคร องจนเสร จสมบ รณ คล กป ม Finish การเป ดใช งานโปรแกรม หล งจำกต ดต งโปรแกรมบนเคร องคอมพ วเตอร แล ว สำมำรถเร ยกใช งำนโปรแกรม ด งน เร ยกผ ำน ป ม Start ม ว ธ ทำ ค อ คล กท ป ม Start บนทำสก บำร เล อกคำส งย อย Programs >> Macromedia >> Macromedia Dreamweaver 8 เร ยกผ ำนไอคอนบนเดสก ทอป

4 กรณ ท ได สร ำงไอคอน Dreamweaver 8 ไว บนเดสก ทอป สำมำรถด บเบ ลคล กท ไอคอนได เม อเป ดโปรอกรมแล วจะเข ำส หน ำต ำงท เร ยกว ำ หน ำเร มต น (Start Page) เพ อให ผ ใช เร ยกใช งำน ได อย ำงรวดเร ว ซ งประกอบด วยส วนต ำง ๆ ด งร ป 2. ส วนต าง ๆ ของโปรแกรม Dreamweaver 8

5 แถบช อเร อง (Title Bar) แสดงช อแฟ มข อม ลท กำล งใช งำนอย แถบคำส ง (Menu Bar) เป นส วนท เก บคำส งต ำง ๆ ท ใช งำนในโปรแกรม Dreamweaver 8 แถบเคร องม อ (Document Tool Bar) เป นส วนท ใช ในกำรจ ดกำรก บเว บเพจ ณ ขณะน นเช นกำรเปล ยน ม มมองในกำรด หน ำเว บเพจ แถบแทรก (Insert Bar) เป นกล มเคร องม อท ใช สร ำงองค ประกอบต ำง ๆ ในเว บเพจซ งประกอบด วยช ด เคร องม อ 8 ช ดด วยก น พ นท ออกแบบ (Document Window) เป นส วนท ใช สำหร บใส เน อหำและจ ดองค ประกอบของเว บเพจ โดยประกอบด วยม มมองกำรทำงำน 3 ร ปแบบด วยก นค อ Design, Code และ Code and Design แถบสถำนะ (Status Bar) เป นส วนท แสดงสถำนะของกำรใช งำนโปรแกรม ณ ขณะน น หน ำต ำง Properties เป นส วนของคำส งท ใช ในกำรกำหนดค ณสมบ ต ของ องค ประกอบต ำง ๆ ท เรำต องกำรเปล ยนแปลงหร อตกแต ง กล มพำเนล (Panel Group) เป นกล มของแผงควบค มท ใช แทนคำส งและต ดต อก บฐำนข อม ล 3. การเร มต นการสร างเว บไซต และเว บเพจ กำรกำหนดโครงสร ำงเว บไซต

6 กำรเตร ยมพ นท หร อโฟลเดอร สำหร บเก บเว บไซต โดยจ ดกำรสร ำงโฟลเดอร เพ อเก บข อม ลหร อเก บไฟล ต ำงๆ ให เป น หมวดหม เพ อง ำยต อกำรจ ดท ำเว บไซต และง ำยต อกำรบร หำรงำนเว บไซต ด งน นกำรจ ดกำรวำงแผนจ ดเก บข อม ล ลงในโฟลเดอร จ งเป นส งสำค ญ ล กษณะของกำรจ ดเก บ เช นโฟล เดอร หล กใช เก บไฟล ประเภท.html โฟล เดอร ร ปภำพ โฟล เดอร เส ยง โฟล เดอร ภำพเคล อนไหว อ กท งย งสำมำรถสร ำงโฟลเดอร ย อย (Sub folder) ลงในโฟลเดอร ต ำง ๆ ได อ กด วย การสร างไซต (Site) งาน คล กท เมน Site แล วเล อกค ำส ง New Site

7 จะเข ำส หน ำต ำง Site Definition เพ อก ำหนดช อไซต พ มพ ช อไซต ท ต องกำร เช น Comlearning2u.com แล วคล กป ม Next เล อกไม ต องต ดต อไปย งเซ ร ฟเวอร ในขณะน (No, I don t ) แล วคล กป ม Next กำหนดว ธ แก ไขงำนและโฟลเดอร ท เก บเว บไซต แล วคล กป ม Next

8 เล อกร ปแบบกำรเช อมต อก บเว บเซ ร ฟเวอร เป น None แล วคล กป ม Next จะได รำยละเอ ยดท เรำต งค ำไว ท งหมด คล กป ม Done โฟล เดอร ท สร ำงจะปรำกฏอย ท พำเนลไฟล

9 การสร างไฟล และโฟลเดอร ใหม หล งจำกได สร ำงไซต งำนไว แล ว ข นตอนต อไปค อกำรสร ำงโฟลเดอร ย อย และไฟล งำนตำมท ได วำงแผนไว ซ งม ว ธ กำรสร ำง ด งน คล กขวำท ไซต ในพำเนลไฟล จะได เมน ล ด และเล อกคำส ง New Folder จะปรำกฏโฟลเดอร ใหม ช อ Untitled ให พ มพ เปล ยนช อโฟลเดอร ใหม เช น Images สร ำงโฟลเดอร ต ำง ๆ ตำมท ต องกำร ส วนกำรสร ำงไฟล งำนให เล อกคำส ง New File จะได ไฟล งำน ช อ Untitled ให เปล ยนช อใหม เช น index.html

10 กำรแก ไขไฟล และโฟลเดอร ให คล กขวำท ไฟล หร อโฟลเดอร ท ต องกำร แล วเล อกคำส ง Edit จะม คำส ง ย อยให เล อก เช น Copy Delete ฯลฯ เม อสร ำงโฟลเดอร และไฟล ต ำง ๆ ในไซต งำนของเรำครบแล ว ถ ำเป ดด โฟลเดอร จะพบรำยกำรท ได สร ำง ไว

11 การสร างหน าเว บเพจใหม เม อเป ดโปรแกรมแล วจะเข ำส หน ำสำหร บสร ำงเว บเพจม ช อว ำ Untitled-1 โดยอ ตโนม ต เรำ สำมำรถสร ำงเว บเพจได ท นท อย ำงไรก ตำมหำกต องกำรสร ำงหน ำเว บเพจใหม ก สำมำรถทำได ด งน เล อกคำส ง File >> New จะได หน ำต ำง New Document คล กเล อกแท บ General แล วเล อก Category เป น Basic Page คล กป ม Create ในต วเล อก Category จะม ล กษณะของเว บเพจให เล อกใช งำน ด งน Basic Page Dynamic Page Template Page Other CSS Style Sheets Framesets Page Design (CSS) Starter Pages Page Design สำหร บสร ำงเว บเพจใหม ท วไป เช น HTML, XML เป นต น สร ำงเว บเพจแบบไดนำม ก สน บสน นเว บเซ ร ฟเวอร ASP,PHP สร ำงหน ำแม แบบสำหร บใช งำนคร งต อไป สร ำงเว บเพจจำกภำษำอ น ๆ เช น VBscript เล อกใช ร ปแบบ CSS เล อกใช งำนเฟรมเซตแบบต ำง ๆ ท โปรแกรมออกแบบไว เล อกร ปแบบ CSS เล อกร ปแบบตำมหมวดหม ท โปรแกรมออกแบบไว ให เล อกใช เล อกกำรออกแบบท เหมำะสมก บกำรใช งำน หร อ ประเภท ธ รก จ ของผ ใช งำน

12 กำรเป ดใช เว บเพจท ได สร ำงไว แล ว ให เล อกคำส ง File >> Open แล วเล อกไฟล ท ต องกำร การใส ห วเร องหร อแถบช อเร อง ห วเร องหร อแถบช อเร องของหน ำเว บเพจ เป นส วนท ปรำกฏอย บนแถบช อของเว บเพจหน ำน น ๆ เพ อบอกให ผ อ ำนทรำบว ำกำล งเป ดด เว บเพจหน ำอะไร ด งต วอย ำง กำรใส ห วเร องทำได ด งน คล กท ช อง Title บน Toolbar แล วพ มพ ช อเร องท ต องกำร หร อคล กป ม Page Properties จะได หน ำต ำง Page Properties แล วคล กท ต วเล อก Title/Encoding จะได ต วเล อก ด งร ป พ มพ ข อควำมแถบช อเร อง เช น Com-learning2u ในช อง Title: แล วคล ก OK จะได แถบช อเร องตำมต องกำร 4. การบ นท กเว บเพจ กำรบ นท กเว บเพจท งเว บเพจท สร ำงใหม และเว บเพจท เป ดข นมำใช งำน ม ว ธ กำรด งน กำรบ นท กไฟล ใหม คล กคำส ง File >> Save As จะได หน ำต ำง Save As เล อกโฟลเดอร และพ มพ ช อไฟล

13 คล กป ม Save คำส ง Save All หมำยถ งบ นท กไฟล ท งหมดท เป ดใช งำนหร อแก ไข คำส ง Save to Remote Server หมำยถ ง บ นท กเว บเพจและอ พโหลดไปส เซ ร ฟเวอร คำส ง Save as Template หมำยถ ง บ นท กเป นแม แบบสำหร บใช งำน 5. การทดสอบก บเว บเบราเซอร เว บเพจท สร ำงและบ นท กไว แล ว สำมำรถทดสอบเพ อด ผลงำนก บเว บเบรำเซอร แบบ ออฟไลน (Offline) ได โดยปกต Dreamweaver 8 จะเล อกเว บเบรำเซอร ให เองโดยอ ตโนม ต ส วนใหญ ก จะ แป น Internet Explorer แต ม บำงคนท ใช Firefox ท งน กำรแสดงผลอำจจะไม ตรงก นเส ย ท เด ยว กำรทดสอบก บเว บเบรำเซอร ทำได ด งน กดแป น < F12 > บนค ย บอร ด หร อด บเบ ลคล กท ไฟล.html น น ๆ หร อ เล อกคำส ง File >> Preview in Browser >> iexplorer.exe (หร อ Firefox.exe) จะได เว บเพจด งต วอย ำง 6. การออกจากโปรแกรม กำรออกจำกโปรแกรมทำได 4 ว ธ ด งน ว ธ ท 1 คล กเมำส ท ป ม Close ท Control Box ว ธ ท 2 คล กท ป ม บน Title Bar แล วเล อกคำส ง Close ว ธ ท 3 คล กท คำส ง File >> Exit ว ธ ท 4 ใช แป นพ มพ < Ctrl > + < Q >